<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计测试</title>
    <script type="text/javascript" src="/static/echarts/echarts.js"></script>
    <script type="text/javascript" src="/static/echarts/echarts-all.js"></script>

    <script>
        let xAxis = [];
        {% for x in statistic_info.x_axis  %}
            xAxis.push(`{{ x }}`);
        {% endfor %}

        let option = {
            title: {
                text: '{{ statistic_info.title }}',
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['观看人数']
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxis,
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} 人'
                    }
                }
            ],
            series: [
                {
                    name: '观看人数',
                    type: 'line',
                    data: {{ statistic_info.data }},
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                },
            ]
        };
        window.onload = () => {
            let myChart = echarts.init(document.getElementById('line_chart'));
            myChart.setOption(option);
        };

    </script>

    <style type="text/css">
        input {
            border: 1px solid #ddd;
            padding: 10px;
            outline: none;
            box-shadow: none;
            margin-bottom: 20px;
            width: 200px;
        }

        .search {
            background-color: #007b99;
            padding: 9px 20px;
            border: none;
            color: white;
        }

        .search:active {
            background-color: #4c8299;
        }

        body {
            padding: 20px;
        }
    </style>
</head>
<body>

<h2>看播人数走势图</h2>
<form method="post">
    {% csrf_token %}
    <input name="name" placeholder="请输入统计项目名称">
    <button class="search" type="submit">查询</button>
</form>
<div id="line_chart" style="width: 100%; height: 80vh; background-color: rebeccapurple"></div>
</body>
</html>